<script setup>
import { useStore } from 'vuex';
import empty from '@/assets/img/empty.png'
import pagination from '@/components/pagination.vue'
import { reactive, ref, computed, onMounted, onBeforeUnmount,watch,inject } from 'vue';
import emptyData from '@/components/emptyData.vue'
const store = useStore()
import { jsonp } from 'vue-jsonp'
const api = store.state.api
const common = store.state.common.obj
const isAnchor = store.state.isAnchor
const subString = inject('methods').subString
// 获取本地图片
const getAssetsImages = (name) => {
    return new URL(`../../assets/img/ceremony/${name}.png`,
        import.meta.url).href;
}
// 用户信息
let welfareVote_info = reactive({
    result: {
        "expect_award": 0,
        "pool": 0,
        "remain_vote": 0,
        "stage": 0,
        "userId": 0,
        "userName": "",
        "vote_count": 0
    }
})
const getWelfareVote_info = async () => {
    await api.welfareVote_info({ userId: common.userId }).then(res => {
        // res = {
        //     data:  {
        //         "errcode": 0,
        //         "result": {
        //             "expect_award": 50,
        //             "pool": 100,
        //             "remain_vote": 30,
        //             "stage": 0,
        //             "userId": 2039605600,
        //             "userName": "残阳醉",
        //             "vote_count": 50
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) welfareVote_info.result = res.data.result
    })
}

let timer
onMounted((pageAfter) => {
    getWelfareVote_info()
    getRecord()
    timer = setInterval(() => {
        getWelfareVote_info()
        getRecord(pageAfter)
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 奖励记录
let lotteryRecord = reactive({
    result: {
        list: []
    }
})
let page = ref(0)
const getRecord = async (pageAfter) => {
    await api.welfareVote_anchor_rank({ page: page.value}).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": {
        //             "list": [
        //             {
        //                 "anchorId": 361677,
        //                 "anchorName": "爱上的地方",
        //                 "anchorPic": ""
        //             },{
        //                 "anchorId": 361678,
        //                 "anchorName": "爱上的地方",
        //                 "anchorPic": ""
        //             },{
        //                 "anchorId": 361679,
        //                 "anchorName": "爱上的地方",
        //                 "anchorPic": ""
        //             },
        //             ],
        //             "totalPage": 1,
        //             "currPage": 1
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) {
            lotteryRecord.result = res.data.result
            pageAfter && pageAfter()
        }
    })
}
const record = computed(() => {
    return lotteryRecord.result
})
const getList = (val, pageAfter) => {
    page.value = val
    getRecord(pageAfter)
}

let selectCur = ref(-1)
let showList = ref(false)
let selectCur2 = ref(0)
const targetAnchorInfo = reactive({result:{}})
const selectNum = (index)=>{
    showList.value = false
    selectCur2.value = index
}
watch(selectCur,()=>{
    jsonp('https://datacenter.qxiu.com/cgi/anchor/info?anchorId=' +lotteryRecord.result.list[selectCur.value].anchorId).then(res => {
        if (res.result){
            targetAnchorInfo.result = res.result.info
        }
    })
})
let showVoteMod = ref(false)
const toVote = (index)=>{
    api.welfareVote({ 
        userId: common.userId,
        anchorId: lotteryRecord.result.list[selectCur.value].anchorId,
        count: selectCur2.value==0?5:(selectCur2.value==1?10:welfareVote_info.result.remain_vote),
        mcheck: common.mcheck
     }).then(res => {
        // res = {
        //     data:  {
        //         "errcode": 0,
        //         "result": {
        //             "expect_award": 50,
        //             "pool": 100,
        //             "remain_vote": 0,
        //             "stage": 0,
        //             "userId": 2039605600,
        //             "userName": "残阳醉",
        //             "vote_count": 50
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) welfareVote_info.result = res.data.result
    })
}
const toShowVoteMod= ()=>{
    if(selectCur.value<0){
        return
    }else{
        showVoteMod.value = !showVoteMod.value
    }
}
const showLog= ()=>{
    if(selectCur.value<0){
        return
    }else{
        showVoteMod.value = !showVoteMod.value
    }
}


</script>

<template>
    <div class="trenchCeremony">
        <div class="part1">
            <div class="ruleIntro">
                <p>每送出XXX个联赛票，即可获得1张支持券，并向竞猜壕礼奖池中增加豆数；从淘汰赛起，每个赛段均可使用支持券，参与谁是主播前3名的竞猜，最终猜对的神壕，将按支持力度瓜分赛段的竞猜壕礼奖池</p>
                <div class="btn">查看详情</div>
            </div>
            <div class="item">
                <div class="til">
                    <p>当前赛段</p>
                    <p>淘汰赛</p>
                </div>
                <div class="data">
                    <p>当前奖池豆数</p>
                    <div class="list">
                        <i v-for="item in welfareVote_info.result.pool.toString().split('')">{{ item }}</i>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="til">
                    <p>我已支持</p>
                    <p>{{ welfareVote_info.result.vote_count }}次</p>
                </div>
                <div class="data">
                    <p>预计奖励豆数</p>
                    <div class="list">
                        <i v-for="item in welfareVote_info.result.expect_award.toString().split('')">{{ item }}</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="part2">
            <div class="logEntry" @click="showLog">参与记录</div>
            <div class="vote">
                <div class="info">
                    <p class="nick">昵称: {{ welfareVote_info.result.userName }}</p>
                    <p class="uid">ID: {{ welfareVote_info.result.userId }}</p>
                    <div class="owns">
                        <div class="til">拥有<br>支持券</div>
                        <div class="val">{{ welfareVote_info.result.remain_vote }}</div>
                    </div>
                </div>
                <div class="times">
                    <div class="select">
                        <p class="show">1次</p>
                        <div class="btn" @click="showList=!showList"></div>
                        <div class="selCon" v-if="showList">
                            <div class="opt" :class="{cur:selectCur2==0}" @click="selectNum(0)">5次</div>
                            <div class="opt" :class="{cur:selectCur2==1}" @click="selectNum(1)">10次</div>
                            <div class="opt" :class="{cur:selectCur2==2}" @click="selectNum(2)">全部</div>
                        </div>
                    </div>
                    <div class="toVote" @click="toShowVoteMod">支持TA</div>
                </div>
            </div>
            <div class="devide">参赛主播</div>
            <div class="lists">
                <div class="item" v-for="(item,index) in record.list" @click="selectCur=index" :class="{cur:selectCur==index}">
                    <div class="tx">
                        <img :src="item.anchorPic||empty" alt="">
                    </div>
                    <p>{{ item.anchorName }}</p>
                    <p>ID:{{ item.anchorId }}</p>
                </div>
                <pagination v-if="record.totalPage > 0" :all="record.totalPage" @on-change="getList" />
            </div>
        </div>
        <div class="voteMod" v-if="showVoteMod">
            <div class="info">
                <p>主播ID：{{ targetAnchorInfo.result.anchorId }}</p>
                <p>主播昵称：{{ subString(targetAnchorInfo.result.nickname,8,true) }}</p>
                <p>支持次数：{{ selectCur2.value==0?5:(selectCur2.value==1?10:welfareVote_info.result.remain_vote) }}</p>
            </div>
            <div class="btn" @click="toVote">确认支持</div>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>